<template>
	<view class="AppH5login">
		<view class="h5login">

			<view class="login_image">
			</view>
			<view class="login_info">
				<view class="login_phone">
					手机号:<input placeholder="请输入手机号" type="text" v-model="phone" />
					<view class="u-demo-block__content">
						<u-code ref="uCode2" @change="codeChange2" keep-running start-text="获取验证码"></u-code>
						<text @tap="getCode2" :text="tips2" class="u-page__code-text">{{tips2}}</text>
					</view>
				</view>
				<view class="login_phone">
					验证码:<input placeholder="请输入验证码" type="text" v-model="password" />
				</view>
				<view class="viewview">
					<u-checkbox-group class="login_check" v-model="checked" size="22">
						<u-checkbox class="checked" activeColor="green" name="1">
						</u-checkbox>
					</u-checkbox-group>
					<span class="span">请点击并阅读<span @click="handleClick1">《服务协议》</span>,<span
							@click="handleClick2">《隐私政策》</span></span>
				</view>
				<view class="view">
					<view class="uni-btn-v">
						<button type="primary" @click="GoPhone">登录</button>
					</view>
					<view class="uni-btn-v1">
						<button type="primary" @click="goregister()">注册</button>
					</view>
				</view>
			</view>

		</view>
		<view class="img1"></view>
		<view class="img2"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				password: '',
				tips2: '',
				checked: []
			}
		},
		methods: {
			changeCheck() {
				this.checked = !this.checked;
			},
			codeChange2(text) {
				this.tips2 = text;
			},
			goregister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			GoPhone() {
				if (this.checked.length > 0) {
					this.$http({
						url: '/MemberLogin/appLogin',
						data: {
							memberName: this.phone,
							verificationCode: this.password
						},
						method: 'POST'
					}).then(res => {
						if (res.data.code === 200) {
							uni.showToast({
								title: res.data.message,
								icon: 'success'
							})
							uni.setStorageSync('secretKey', res.data.data);
							uni.switchTab({
								url: '/pages/user/user'
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error'
							})
						}
					})
				} else {
					uni.showToast({
						title: "请先阅读认养协议",
						icon: 'error'
					})
				}
			},
			getCode2() {
				if (this.phone === '') {
					callback1(new Error('手机号不能为空'))
				} else if (this.phone != '') {
					if (this.$refs.uCode2.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$http({
							url: "/MemberLogin/sendSms",
							data: {
								templateId: 'SMS_241100166',
								phoneNumberSet: this.phone
							}
						}).then(res => {
							if (res.data.code != 200) {
								uni.hideLoading();
								uni.showToast({
									title: res.data.message
								})
								return
							} else {
								setTimeout(() => {
									uni.hideLoading();
									uni.$u.toast('验证码已发送');
									this.$refs.uCode2.start();
								}, 2000);
							}
						})
					} else {
						uni.$u.toast('请等待时间结束');
					}
				}

				function callback1(Error) {
					uni.showModal({
						title: '手机号码不能为空',
					});
				}

				function callback(Error) {
					uni.showModal({
						title: '请输入有效的手机号码',
					});

				}
			}
		},
		onShow() {
			this.tips2 = '获取验证码'
		}
	}
</script>

<style>
	@import './AppH5login.css';
</style>
